<template>
    <div class="overview">
        <!-- <div class="bunko item">1</div>
        <div class="share_order item">2</div>
        <div class="exclusive_order item">3</div> -->
        <el-row :gutter="16" style="width: 100%">
            <el-col :span="8">
                <div class="item bunko">
                    <div
                        style="display: flex;justify-content: space-between;padding-bottom: 12px;border-bottom: 1px solid #ebebeb;">
                        <div class="bunko1">
                            <div class="label">账号总输赢：</div>
                            <div class="value">¥{{ billdata.all.win_back?.toFixed(2) || 0 }}</div>
                        </div>
                        <div class="bunko1">
                            <div class="label">未结算金额：</div>
                            <div class="value">¥{{ billdata.all.no_check_amount?.toFixed(2) || 0 }}</div>
                        </div>
                    </div>

                    <div class="bunko_list">
                        <div class="bunko_item">
                            <div class="label">共享输赢：</div>
                            <div class="value" :style="billdata.all.share ? statusColor(billdata.all.share.win_back) : ''">¥{{
                                billdata.all.share?.win_back.toFixed(2) || 0 }}</div>
                        </div>
                        <div class="bunko_item">
                            <div class="label">独享输赢：</div>
                            <div class="value" :style="billdata.all.exclusive ? statusColor(billdata.all.exclusive.win_back) : ''">¥{{
                                billdata.all.exclusive?.win_back?.toFixed(2) || 0 }}
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item share_order">
                    <div class="title">共享订单概览</div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="sum sum1">
                            <div class="label">有效金额：</div>
                            <div class="value">¥{{ billdata.all.share?.valid_amount?.toFixed(2) || 0 }}</div>
                            <div class="num">({{ billdata.all.share?.order_count || 0 }}单)</div>
                        </div>
                        <div class="sum sum2">
                            <div class="label">共享未结算：</div>
                            <div class="value">¥{{ billdata.all.share?.no_check_amount?.toFixed(2) || 0 }}</div>
                            <!-- <div class="num">({{ billdata.all.share.order_count }}单)</div> -->
                        </div>
                    </div>
                    <div class="detail">
                        <div class="detail_item sum1">
                            <div class="label1">赢</div>
                            <div class="value">¥{{ billdata.all.share?.win.win_back?.toFixed(2) || 0 }}</div>
                            <div class="num">({{ billdata.all.share?.win.order_count || 0 }}单)</div>
                        </div>
                        <div class="detail_item sum2">
                            <div class="label2">输</div>
                            <div class="value">¥{{ billdata.all.share?.lose.win_back?.toFixed(2) || 0 }}</div>
                            <div class="num">({{ billdata.all.share?.lose.order_count || 0 }}单)</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item exclusive_order">
                    <div class="title">独享订单概览</div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="sum sum1">
                            <div class="label">有效金额：</div>
                            <div class="value">¥{{ billdata.all.exclusive?.valid_amount?.toFixed(2) || 0 }}</div>
                            <div class="num">({{ billdata.all.exclusive?.order_count || 0 }}单)</div>
                        </div>
                        <div class="sum sum2">
                            <div class="label">独享未结算：</div>
                            <div class="value">¥{{ billdata.all.exclusive?.no_check_amount?.toFixed(2) || 0 }}</div>
                            <!-- <div class="num">({{ billdata.all.exclusive.order_count }}单)</div> -->
                        </div>
                    </div>
                    <div class="detail">
                        <div class="detail_item sum1">
                            <div class="label1">赢</div>
                            <div class="value">¥{{ billdata.all.exclusive?.win.win_back.toFixed(2) || 0 }}</div>
                            <div class="num">({{ billdata.all.exclusive?.win.order_count || 0 }}单)</div>
                        </div>
                        <div class="detail_item sum2">
                            <div class="label2">输</div>
                            <div class="value">¥{{ billdata.all.exclusive?.lose.win_back.toFixed(2) || 0 }}</div>
                            <div class="num">({{ billdata.all.exclusive?.lose.order_count || 0 }}单)</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
const props = defineProps({
    billdata: Object
})

const statusColor = (value) => {
    let str = ''
    if (value >= 0) {
        str = 'color: #02a66e;'
    } else {
        str = 'color: #fb445f;'
    }

    return str
}
</script>

<style lang="scss" scoped>
.overview {
    padding-left: 16px;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .item {
        height: 112px;
        background-color: #fafafa;
        display: flex;
        flex-direction: column;


    }

    .bunko {
        padding: 16px;

        .bunko1 {
            display: flex;
            align-items: center;
            width: 50%;

            .label {
                font-size: 14px;
                font-weight: 600;
                color: #333;
            }

            .value {
                font-size: 18px;
                font-weight: bold;
                color: #333;


            }
        }

        .bunko_list {
            margin-top: 12px;
            display: flex;
            justify-content: space-between;

            .bunko_item {
                display: flex;
                align-items: center;
                width: 50%;

                .label {
                    font-size: 14px;
                    color: #333;
                }

                .value {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
    }

    .share_order,
    .exclusive_order {
        display: flex;
        flex-direction: column;
        padding: 16px;

        .title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

        .sum {
            margin: 8px 0;
            display: flex;
            align-items: center;
            

            .label {
                font-size: 14px;
                color: #333;
            }

            .value {
                font-size: 14px;
                font-weight: bold;
                color: #333;

            }

            .num {
                margin-left: 8px;
                font-size: 14px;
                font-weight: bold;
                color: #8a8a8a;
            }
        }

        .sum1{
            width: 55%;
        }
        .sum2{
            width: 45%;
        }

        .detail {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .detail_item {
                display: flex;
                align-items: center;

                .label1 {
                    width: 16px;
                    height: 16px;
                    border-radius: 2px;
                    border: solid 1px #02a66e;
                    font-size: 12px;
                    margin-top: -1px;
                    color: #02a66e;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .label2 {
                    width: 16px;
                    height: 16px;
                    border-radius: 2px;
                    border: solid 1px #fb445f;
                    font-size: 12px;
                    margin-top: -1px;
                    color: #fb445f;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .value {
                    font-size: 14px;
                    font-weight: bold;
                    color: #333;
                    margin: 0 8px;
                }

                .num {
                    font-size: 14px;
                    font-weight: bold;
                    color: #8a8a8a;
                }
            }
        }
    }
}
</style>